<template>
    <div class="box">
        <div class="ding" style="display:flex;">
            <i class="iconfont">&#xe611;</i>
       <p :title="city">{{city}}</p>
        </div>
    
       <i @click="qu" class="iconfont">&#xe618;</i>
    </div>
</template>

<script>
import { 
  ajax_dingCity,
    ajax_guessCity,
    ajax_hotCity
} from '../ajax/index'
import {
    mapState,
    mapGetters,
    mapMutations,
    mapActions
} from 'vuex'
export default {
    
    name: '',
    data(){
        return{
            city:'',

        }
    },
    created(){
         window.navigator.geolocation.getCurrentPosition((result)=>{
            // console.log(result.coords)
            // 经度: result.coords.longitude   纬度: result.coords.latitude
            
            var ding={
                latitude:`${result.coords.latitude}`,
                longitude:`${result.coords.longitude}`
            }
            this.$store.commit("setDing",ding);
            // this.myDing(ding);
            var di=`${result.coords.latitude},${result.coords.longitude}`
            ajax_dingCity({

            },di).then(data=>{
                // console.log(data);
                // this.city=data
                this.city=data.address
            })

        })
        

       
    },
    methods:{
         qu(){
             this.$router.push('/geRen')
         }
    }
}
</script>

<style scoped>
.ding{
    width: 70%;
    display: flex;
    text-indent: 10px;
}
.ding>p{
    text-indent: 5px;
}
.box{
    width: 100vw;
    height:7.5vh;
    background-color: #3190e8;
    display:flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
.box>i{
    margin:0 15px;
    font-size: 20px;
}
.box p{
    width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
@font-face {
  font-family: 'iconfont';  /* project id 2408325 */
  src: url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.eot');
  src: url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.woff') format('woff'),
  url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2408325_tx4hi1h5lk.svg#iconfont') format('svg');
}
</style>